import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import GridContent from '@/components/PageHeaderWrapper/GridContent';
import { FormattedMessage } from 'umi-plugin-react/locale';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import PageLoading from '@/components/PageLoading';
import { Button, Icon, message, Form, Input} from 'antd';
import styles from '../Slot/index.less';

const formItemLayout = {
  labelCol: { span: 1 },
  wrapperCol: { span: 20 },
};

class OptionsEle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      optionList:props.optionList
    };
  }

  addSlot=()=>{
    let {optionList} = this.state;
    optionList.push({});
    this.props.upData(optionList)
  };

  forMap = (tag,index) => {
    return (
      <span style={{marginLeft: 15}} key={index}>
        <span className={styles.slotNumber}>{index+1}</span>
        <Input placeholder="输入自定义选项" value={tag} defaultValue="" onChange={(e)=>this.UpdateOption(e,index)} />
        <Icon type="close-circle" style={{marginLeft:5,cursor:'pointer'}} onClick={()=>this.delSlotByIndex(index)} />
      </span>
    );
  };

  delSlotByIndex=(index)=>{
    const {optionList} = this.state;
    optionList.splice(index,1);
    this.props.upData(optionList)
  };

  UpdateOption = (e,index) =>{
    const {optionList} = this.state;
    optionList[index] = e.target.value;
    this.props.upData(optionList)
  };

  render() {
    const {optionList} = this.state;
    const tagChild = optionList.map(this.forMap);
    return (
      <GridContent>
        <Suspense fallback={<PageLoading />}>
          <Form.Item {...formItemLayout} label="">
            <div style={{marginLeft:10,display:'inline-block',width:'100%'}}>
              {tagChild}
              <Button htmlType='button' type="primary" size='small' onClick={()=>this.addSlot()} className={styles.addSlotBtn}>添加</Button>
            </div>
          </Form.Item>
        </Suspense>
      </GridContent>
    );
  }
}
export default connect (({ user }) => ({
  currentUser: user.currentUser
}))(Form.create()(OptionsEle));
